<template>
	<view class="edit container">
		<u-form ref="uForm" :model="formData" label-width="220rpx">
		
			<!-- 姓名 -->
			<u-form-item label="姓名" prop="name" required="true">
				<u-input v-model="formData.name" :disabled="isEdit"></u-input>
			</u-form-item>
		
			<!-- 性别 -->
			<u-form-item label="性别" prop="sex" required="true">
				<u-radio-group v-model="formData.sex">
					<u-radio :name="1" :disabled="isEdit">男</u-radio>
					<u-radio :name="2" :disabled="isEdit">女</u-radio>
				</u-radio-group>
			</u-form-item>
		
			<!-- 文化程度 -->
			<u-form-item label="文化程度" prop="education" required="true">
				<u-input v-model="formData.education.label" type="select" @click="isEdit ? educationShow = false : educationShow = true"/>
				<u-select v-model="educationShow" :list="educationOptions" label-name="label" @confirm="educationConfirm"></u-select>
			</u-form-item>
		
			<!-- 身份证号 -->
			<u-form-item label="身份证号" prop="idcard" required="true">
				<u-input v-model="formData.idcard" :disabled="isEdit"></u-input>
			</u-form-item>
		
			<!-- 电话 -->
			<u-form-item label="电话" prop="phone" required="true">
				<u-input v-model="formData.phone" :disabled="isEdit"></u-input>
			</u-form-item>
		
			<!-- 联系地址 -->
			<u-form-item label="联系地址" prop="addr" required="true">
				<u-input v-model="formData.addr" :disabled="isEdit"></u-input>
			</u-form-item>
		
			<!-- 民族 -->
			<u-form-item label="民族" prop="nation" required="true">
				<u-input v-model="formData.nation.label" type="select" @click="isEdit?nationShow = false:nationShow = true" :disabled="isEdit" />
				<u-select v-model="nationShow" :list="nationOptions" label-name="label" @confirm="nationConfirm" :disabled="isEdit"></u-select>
			</u-form-item>
			
			<!-- 出生日期 -->
			<u-form-item label="出生日期" prop="birth" required="true">
				<u-input type="select" v-model="formData.birth" @click="isEdit?showBirth = false:showBirth = true"/>
				<u-picker v-model="showBirth" mode="time" :params="{year: true,month: true,day: true}" @confirm="changeBirth"></u-picker>
			</u-form-item>
			
			<!-- 准考证头像 -->
			<u-form-item label="准考证头像" prop="icon" required="true">
				<upload :idPic.sync="formData.icon" :disabled="isEdit"></upload>
			</u-form-item>
		
			<!-- 政治面貌 -->
			<u-form-item label="政治面貌" prop="political">
				<u-input v-model="formData.political.label" type="select" @click="isEdit?politicalShow = false:politicalShow = true" :disabled="isEdit" />
				<u-select v-model="politicalShow" :list="politicalOptions" label-name="label" @confirm="politicalConfirm" :disabled="isEdit"></u-select>
			</u-form-item>
		
			<!-- 毕业院校 -->
			<u-form-item label="毕业院校" prop="gdsl">
				<u-input v-model="formData.gdsl" :disabled="isEdit"></u-input>
			</u-form-item>
		
			<!-- 学位 -->
			<u-form-item label="学位" prop="degree">
				<u-input v-model="formData.degree.label" type="select" @click="isEdit?degreeShow = false:degreeShow = true" :disabled="isEdit" />
				<u-select v-model="degreeShow" :list="degreeOptions" label-name="label" @confirm="degreeConfirm" :disabled="isEdit"></u-select>
			</u-form-item>
		
			<!-- 籍贯 -->
			<u-form-item label="籍贯" prop="nate">
				<u-input v-model="formData.nate" :disabled="isEdit"></u-input>
			</u-form-item>
		
			<!-- 户籍 -->
			<u-form-item label="户籍" prop="census">
				<u-input v-model="formData.census" :disabled="isEdit"></u-input>
			</u-form-item>
		
			<!-- 国籍 -->
			<u-form-item label="国籍" prop="nationality">
				<u-input v-model="formData.nationality" :disabled="isEdit"></u-input>
			</u-form-item>
			
		
			<!-- 毕业时间 -->
			<u-form-item label="毕业时间" prop="gdtm">
				<u-input type="select" v-model="formData.gdtm" @click="isEdit?showGdtm = false:showGdtm = true"/>
				<u-picker v-model="showGdtm" mode="time" :params="{year: true,month: true,day: true}" @confirm="changeGdtm"></u-picker>
			</u-form-item>
		
			<!-- 身份证正面 -->
			<u-form-item label="身份证正面照片" prop="idpic">
				<upload :idPic.sync="formData.idpic" :disabled="isEdit"></upload>
			</u-form-item>
		
			<!-- 身份证背面 -->
			<u-form-item label="身份证背面照片" prop="idrpic">
				<upload :idPic.sync="formData.idrpic" :disabled="isEdit"></upload>
			</u-form-item>
		
			
			<view class="btn">
				<template v-if="isEdit">
					<u-button style="width: 100%;" type="error" @click="isEdit = false">修改信息</u-button>
				</template>
				
				<template v-else>
					<u-button style="width: 50%;" type="primary" @click="save" :loading="saveBtnLoading">保存</u-button>
					<u-button style="width: 50%;" type="default" @click="isEdit = true">取消</u-button>
				</template>
			</view>
		</u-form>

		<wyb-loading ref="loading" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	
	import userFormCom from "@/components/userFormCom.vue"
	import wybLoading from '@/components/wyb-loading/wyb-loading.vue'
	import upload from "@/components/upload.vue"
	import {
		getExaminee,
		update
	} from "@/api/apiList/user.js"
	import {formData,rules,politicalOptions,nationOptions,educationOptions,degreeOptions} from "@/utils/common.js" 
	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapMutations
	} = createNamespacedHelpers('userInfoModule')
	export default {
		components: {
			userFormCom,
			wybLoading,
			upload
		},
		data() {
			return {
				loading: false, //整页loading
				isEdit: false, //是否为编辑状态
				saveBtnLoading: false, //保存按钮loading
				formData: formData,
				rules:rules,
				politicalOptions:politicalOptions,
				nationOptions:nationOptions,
				educationOptions:educationOptions,
				degreeOptions:degreeOptions,
				educationShow:false,
				politicalShow:false,
				nationShow:false,
				degreeShow:false,
				showBirth:false,
				showGdtm:false
			}
		},
		methods: {
			...mapMutations(["UPDATE_USER_INFO"]),
			async API_getExaminee() { //获取个人信息
				return await getExaminee()
			},
			async API_update(data) { //编辑个人信息
				let result = {
					data, //个人信息
				};
				return await update(result)
			},
			async save() {
				//保存
				this.$refs.uForm.validate(async (valid) =>{
					if(valid){
						this.saveBtnLoading = true;
						this.$refs.loading.showLoading()
						let formData = this.$u.deepClone(this.formData)
						
						for(let key in formData){
							if(typeof formData[key] === "object"){
								formData[key] = formData[key].value
							}
						}
						
						this.UPDATE_USER_INFO(formData)
						let res = await this.API_update(formData);
						
						if (res.data.code === 1000) {

							this.$refs.loading.hideLoading()
						
							this.$refs.uToast.show({
								title: '修改成功',
								type: 'success',
								url: '/pages/user/user',
								isTab:true
							})
						} else {
							this.$refs.uToast.show({
								title: '修改失败',
								type: 'error',
							})
						}
						this.saveBtnLoading = false;
					}else{
						console.log('验证失败');
					}
				})
				
			},
			cancel() {
				//取消
				// uni.navigateTo({
				// 	url: "/pages/userInfo/userInfo"
				// })
				this.isEdit = false
			},
			changeGdtm(e) { //更换毕业日期
				// this.formData.gdtm = e.result
				this.formData.gdtm = e.year + "-" + e.month + "-" + e.day
			},
			changeBirth(e) { //更换生日日期
				this.formData.birth = e.year + "-" + e.month + "-" + e.day
				// this.formData.birth = e.result
			},
			educationConfirm(e){
				this.formData.education.label = e[0].label
				this.formData.education.value = e[0].value
			},
			nationConfirm(e){
				this.formData.nation.label = e[0].label
				this.formData.nation.value = e[0].value
			},
			politicalConfirm(e){
				this.formData.political.label = e[0].label
				this.formData.political.value = e[0].value
			},
			degreeConfirm(e){
				this.formData.degree.label = e[0].label
				this.formData.degree.value = e[0].value
			},
			listFilter(formData){
				if(!formData.idcard){
					formData.education = {
						label:"",
						value:""
					}
					formData.political = {
						label:"",
						value:""
					}
					formData.nation = {
						label:"",
						value:""
					}
					formData.degree = {
						label:"",
						value:""
					}
				}else{
					this.educationOptions.forEach((item)=>{
						if(item.value === formData.education){
							formData.education = item
						}
					})
					this.politicalOptions.forEach((item)=>{
						if(item.value === formData.political){
							formData.political = item
						}
					})
					this.nationOptions.forEach((item)=>{
						if(item.value === formData.nation){
							formData.nation = item
						}
					})
					this.degreeOptions.forEach((item)=>{
						if(item.value === formData.degree){
							formData.degree = item
						}
					})
				}
				return formData
			}
		},
		async onLoad(){
			this.$refs.loading.showLoading()
			let res = await this.API_getExaminee()
			this.formData = this.listFilter(res.data.data)
			console.log(this.formData)
			this.$refs.loading.hideLoading()
		},
		onReady(){
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
	.edit {
		.content {
			padding: 0 20rpx;
			box-sizing: border-box;
		}
	}
	.btn {
		display: flex;
		justify-content: center;
	}
</style>
